﻿layui.use(function () {
    var upload = layui.upload;
    var layer = layui.layer;
    var element = layui.element;
    var $ = layui.$;
    var laydate = layui.laydate;
    var form = layui.form;
    var table = layui.table;

    // 获取从视图中嵌入的 ApiUrl
    var apiUrl = $('#apiUrl').data('url');

    $(function () {
        GetList();
    })

    function GetList() {
        // 获取当前页面的 URL
        var urlParams = new URLSearchParams(window.location.search);
        // 获取 URL 中的 id 参数
        var id = urlParams.get('id');
        //ajax后台交互
        $.ajax({
            url: apiUrl + 'smread/api/Device/GetFormDevice',
            type: 'get',
            dataType: 'json',
            //参数
            data: { id: id },
            success: function (res) {
                $('[name="DeviceNumber"]').val(res.Data.DeviceNumber);
                $('[name="DeviceName"]').val(res.Data.DeviceName);
                $('[name="DeviceType"]').val(res.Data.DeviceType);
                $("[name='DeviceState'][value='" + res.Data.DeviceState + "']").prop("checked", "checked");
                $('[name="ProductionLine"]').val(res.Data.ProductionLine);
                $('[name="PurchaseDate"]').val(res.Data.PurchaseDate);
                $('[name="AddPeople"]').val(res.Data.AddPeople);
                $('[name="AddDate"]').val(res.Data.AddDate);
                var images = res.Data.DevicePicture;
                var image = images.split(',');
                image.map(res => {
                    file.push(res)
                })

                if (res.Data.DevicePicture) {
                    var imageUrls = res.Data.DevicePicture.split(',').map(function (filename) {
                        // 假设图片可以通过以下 URL 访问，您需要根据实际情况调整这个 URL
                        return apiUrl + 'smwrite/Image/' + filename;
                    });

                    imageUrls.forEach(function (url) {
                        console.log(url)
                        $('#upload-demo-preview').append(
                            '<div class="upload-item">' +
                            '<img src="' + url + '" alt="Preview" style="width: 90px; height: 90px;">' +
                            '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-btn">删除</button>' +
                            '</div>'
                        );
                    });
                }
                form.render();
            }
        });
    }

    // 渲染
    laydate.render({
        elem: '#ID-laydate-demo'
    });

    var file = []
    // 多图片上传
    upload.render({
        elem: '#ID-upload-demo-btn-2',  // 上传按钮的选择器
        url: apiUrl + 'smwrite/api/File/UpFile',  // 上传接口URL
        multiple: true,  // 支持多文件上传
        before: function (obj) {
            obj.preview(function (index, file, result) {
                // 预览文件
                $('#upload-demo-preview').append(
                    '<div class="upload-item" data-index="' + index + '">' +
                    '<img src="' + result + '" alt="' + file.name + '" style="width: 90px; height: 90px;">' +
                    '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-btn">删除</button>' +
                    '</div>'
                );
            });
        },
        done: function (res) {
            if (res.code === 0) {
                file.push(res.data);  // 保存上传文件的返回数据（比如文件路径或ID）
                console.log(file)
            } else {
                console.log("上传失败");
            }
        },
        error: function () {
            console.log("文件上传失败");
        }
    });

    // 删除功能：删除图片预览和从 file 数组中移除该图片
    $(document).on('click', '.delete-btn', function () {
        var $parent = $(this).closest('.upload-item'); // 找到该删除按钮所在的图片项
        var index = $parent.data('index');  // 获取图片的索引

        // 从 file 数组中删除该图片，使用索引来删除对应的文件路径
        file.splice(index, 1);  // 删除 file 数组中对应的文件路径（根据 index）

        // 从预览列表中移除该图片
        $parent.remove();

        console.log("图片已删除，索引：", index);
        console.log("当前文件列表：", file);
    });

    // 提交事件
    form.on('submit(formDemo)', function (data) {
        var field = data.field; // 获取表单字段值
        // 移除多余的 file 字段
        delete field.file;
        field.DevicePicture = file.join(',');
        // 获取当前页面的 URL
        var urlParams = new URLSearchParams(window.location.search);
        // 获取 URL 中的 id 参数
        field.Id = urlParams.get('id');
        var submitButton = $('button[lay-filter="formDemo"]'); // 获取提交按钮
        submitButton.prop('disabled', true); // 禁用按钮

        // 此处可执行 Ajax 等操作
        $.ajax({
            url: apiUrl + 'smwrite/api/Device/UpdDevice',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(field),
            success: function (res) {
                if (res.Data > 0) {
                    layer.msg('设备添加成功');
                    window.location.href = '/ShopMachine/Device';
                }
            },
            error: function (err) {
                // 处理添加失败的逻辑
                console.error(err);
            },
            complete: function () {
                // 无论请求成功还是失败，都重新启用按钮
                submitButton.prop('disabled', false); // 恢复按钮状态
            }
        });
        return false; // 阻止默认 form 跳转
    });

    $('#Entry').on('click', function () {
        window.location.href = "/ShopMachine/Device";
    });
});